<template>
	<view class="line">
		<view class="mapBox">
			<map v-if="detailInfo.id" :markers="detailInfo.markers" style="width: 100%;height: 900rpx;" :latitude="detailInfo.location[0]" :longitude="detailInfo.location[1]" :show-scale="true"></map>
		</view>
		<view class="infos">
			<view class="tit">
				当前游玩项目：{{ detailInfo.title }}
			</view>
			
			<view class="stars">
				<text>项目推荐：</text>
				<up-rate :count="count" v-model="detailInfo.count"></up-rate>
			</view>
			
			<view class="scrollView">
				<up-scroll-list 
				:indicator="true" 
				indicatorColor="#fff0f0"
				indicatorActiveColor="#f56c6c"
				>
					<view class="items" v-for="(itm,idx) in detailInfo.other" :key="itm.id">
						<image class="img" style="width: 320rpx;height: 200rpx;" :src="itm.url" mode="aspectFill"></image>
						<view class="title">{{ itm.name }}</view>
					</view>
				</up-scroll-list>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { projectInfo } from '@/api/index.js'
import { ref } from 'vue'

const id = ref()
const detailInfo = ref({})
const count = ref()

onLoad((opt) =>{
	id.value = opt.id
	console.log(opt.id)
	projectInfoList()
})

const projectInfoList = async () =>{
	console.log(id.value)
	let res = await projectInfo({id: id.value})
	detailInfo.value = res.data
	console.log(res)
}
</script>

<style lang="scss" scoped>
.infos{
	padding: 20rpx;
	box-sizing: border-box;
	.tit{
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}
	.stars{
		font-size: 28rpx;
		margin: 20rpx 0 40rpx;
		display: flex;
	}
	.scrollView{
		.items{
			margin-right: 20rpx;
			text-align: center;
		}
		.img{
			// width: 320rpx;
			// heigth: 30rpx;
			border-radius: 14rpx;
		}
		.title{
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
}
</style>
